<template>
	<view>   
		<u-cell icon="/static/icon/shopN.png" title="中百" value="详情"></u-cell>
		<view class="chartsMain"> 
			<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas>
		</view>
  
	</view>
</template>

<script>
	// 图表
	var that;
	import uCharts from "@/components/u-charts/u-charts.js";
	var canvaRing = null; 
	 
	export default {
		props:{
			 
			goodsList:{
				type:Array,
				 
			} 
		},
		data() {
			return { 
				cWidth: '',
				cHeight: '',
				pixelRatio: 1, 
				// 圆环图
				Ring : {
					"series": [ {
						"name": "异常",
						"data":  20.8,
					},{
						"name": "未过期",
						"data": 10,
					}, {
						"name": "快过期",
						"data": 20
					}, {
						"name": "临期",
						"data": 18
					}, {
						"name": "已过期",
						"data": 8
					}]
				}, 
			};
		},
		onLoad() {
			that = this; 
			console.log('组件onLoad')
			console.log('组件里的实例',this)
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(420);
			// that.getAnaisy()
			this.getServerData(); 
		},
		computed: {

		},
		mounted() {
			console.log('组件里的实例',this)
			console.log('组件里的实例????')
		},
		methods: { 
			getAnaisy(data,fn){
				let res = {
					err:0,
					no_overdue:0,
					will_overdue:0,
					to_overdue:0,
					is_overdue:0,
					
				}
				let nowtime = new Date().getTime()
				let oneWeek = 1000*60*60*24*7
				let oneMonth = 1000*60*60*24*30
				// 未过期
				let no_overdue = data.filter(function (item) {
					if(item.expiration_date){
						return item.expiration_date >= nowtime;
					} 	
				})
				// 即将过期
				let will_overdue = data.filter(function (item) {
					if(item.expiration_date){
						return item.expiration_date >= nowtime + oneMonth;
					} 	
				})
				// 临期
				let to_overdue = data.filter(function (item) {
					if(item.expiration_date){
						return item.expiration_date >= nowtime + oneWeek;
					} 	
				})
				// 已过期
				let is_overdue = data.filter(function (item) {
					if(item.expiration_date){
						return item.expiration_date >= nowtime;
					} 	
				})
				// 未设置过期时间的
				let err = data.filter(function (item) {
					if(!item.expiration_date){
						return true 
					} 	
				})
				console.log('未过期',no_overdue)
				console.log('快过期',will_overdue)
				console.log('临期',to_overdue)
				console.log('is_overdue',is_overdue)
				console.log('err',err)
				 // typeof fn == 'function' && fn(res);
			},
			getServerData() { 
				that.showRing("canvasRing", this.Ring);
			 
			},   
			// 圆环图
			showRing(canvasId, chartData) {
				canvaRing = new uCharts({
					$this: this,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 11,
					legend: true,
					extra: {
						pie: {
							offsetAngle: -45,
							ringWidth: 30 * that.pixelRatio,
							lableWidth: 15
						}
					},
					background: '#FFFFFF',
					pixelRatio: that.pixelRatio,
					series: that.Ring.series,
					animation: true,
					width: that.cWidth * that.pixelRatio,
					height: that.cHeight * that.pixelRatio,
					disablePieStroke: true,
					dataLabel: true,
				});
			},
			touchRing(e) {
				canvaRing.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
						// return item.name + ':' + item.data
					}
				});
			},
 

		}
	};
</script>

<style lang="scss" scoped>
	.chartsMain {
		width: 750rpx;
		height: 450rpx;
		padding-top: 15rpx;
		background: #fff;
		margin-bottom: 24rpx;
		border-top: 2rpx solid #f2f2f2;
		.charts {
			width: 750rpx;
			height: 450rpx;
			box-sizing: border-box;
		}
	}
</style>
